<template>
  <div class="new-ticket">
    <h1>New ticket</h1>
    <SmartForm title="New ticket" :operation="operation" :valid="valid">
      <FormInput
        name="title"
        v-model="title"
        placeholder="Short description (max 100 chars)"
        maxlength="100"
        required
      ></FormInput>
      <FormInput
        type="textarea"
        v-model="description"
        name="description"
        placeholder="Describe your problem in details"
        rows="4"
      ></FormInput>

      <!-- 操作按钮 -->
      <template slot="actions">
        <router-link tag="button" :to="{name: 'tickets'}" class="secondary">Go Back</router-link>
        <button type="submit" :disabled="!valid">Send ticket</button>
      </template>
    </SmartForm>
  </div>
</template>

<script>
import PersistantData from "../mixins/PersistantData";
export default {
  mixins: [PersistantData("NewTicket", ["title", "description"])],
  data() {
    return {
      title: "",
      description: ""
    };
  },
  computed: {
    valid() {
      return !!this.title && !!this.description;
    }
  },
  methods: {
    async operation() {
      const result = await this.$fetch("tickets/new", {
        method: "POST",
        body: JSON.stringify({
          title: this.title,
          description: this.description
        })
      });
      // 提交完信息之后清空输入框
      this.title = this.description = "";
      this.$router.push({ name: "ticket", params: { id: result._id } });
    }
  }
};
</script>

<style lang="stylus" scoped></style>